<div class="youbian">
  <div id="fei1">
      <span class="mi" @click="qiehuan=1" :class="{'bule':qiehuan === 1}">密码登录</span>
      <span class="mi" @click="qiehuan=2" :class="{'bule':qiehuan === 2}">短信登录</span>
      <div class="shuru">
          <div><span>账号</span><input type="text" placeholder="请输入账号"></div>
          <div><span>密码</span><input  placeholder="请输入密码"></div>
          </div>
          
          
          <span class="wangji" @click="wangjile=!wangjile">忘记密码？</span>
          <div class="wangjimima"><span v-show="wangjile" v-for="(a,b) in wangJi">{{a.name}}</span>
              <span v-show="wangjile" v-for="(a,b) in wangJi">{{a.Name}}</span></div>
          
          
          <img class="zhengyan" src="./image/lQLPJyG7gB9Lcl_M0szpsHa6ppeuapbjBqgRyK5Ifgc_233_210.png"  v-show="child===1" alt="">
          <img class="zhengyan" src="./image/lQLPKc9WspCxwl_M0szosM6vP2lR2j1jBqgRyK5IfgY_232_210.png"  v-show="child===2" alt="">
          <img class="biyan" src="./image/lQLPJyEOskzJkl_M1MzYsJdFk_wsT_FMBqgRyK5IfgU_216_212.png" v-show="child===1" alt="">
          <img class="biyan" src="./image/lQLPKHDdC5GaIl_M1MzYsFIdi2LKnhWXBqgRyK5IfgA_216_212.png" v-show="child===2" alt="">
      </div>

      <div class="anniu" v-show="qiehuan===1">
          <a @click="qiehuan=2"><div class="zhuce"><span>注册</span></div></a>
          <a><div class="denglu"><span>登录</span></div></a>
      </div>
  
      <div class="shuru" v-show="qiehuan===2">
          <div class="zhanghao1"><span @click="selectOpen=!selectOpen">{{shoujihao[moren].hao}}</span><input style="width: 255px; border: none; background-color: rgba(255, 255, 255, 0); outline: none;" type="text" placeholder="请输入手机号"><div>
              <button style="background-color: rgba(255, 255, 255, 0);border: none;">获取验证码</button></div>
              <div class="feifei"><p v-show="selectOpen" @click="moren=index,selectOpen=false" v-for="(item,index) in shoujihao">{{item.name}}{{item.hao}}</p></div>
          </div>
          <div class="mima"><span>验证码</span><input @focus="child=1" @blur="child=2" style="width: 320px; border: none; background-color: rgba(255, 255, 255, 0); outline: none;" :type="displayThePassword?'text':'password'" placeholder="请输入验证码"></div>
          <img class="zhengyan" src="./image/lQLPJyG7gB9Lcl_M0szpsHa6ppeuapbjBqgRyK5Ifgc_233_210.png"  v-show="child===1" alt="">
          <img class="zhengyan" src="./image/lQLPKc9WspCxwl_M0szosM6vP2lR2j1jBqgRyK5IfgY_232_210.png"  v-show="child===2" alt="">
          <img class="biyan" src="./image/lQLPJyEOskzJkl_M1MzYsJdFk_wsT_FMBqgRyK5IfgU_216_212.png" v-show="child===1" alt="">
          <img class="biyan" src="./image/lQLPKHDdC5GaIl_M1MzYsFIdi2LKnhWXBqgRyK5IfgA_216_212.png" v-show="child===2" alt="">
      </div>
      <div class="anniu1" v-show="qiehuan===2">
          <a href=""><div class="denglu"><span>登录/注册</span></div></a>
      </div>

  </div>
  <p style="margin-top: 30px;">其他登陆方式</p>
  <div class="tubiao">
      <a href="https://open.weixin.qq.com/connect/qrconnect?appid=wxafc256bf83583323&redirect_uri=https%3A%2F%2Fpassport.bilibili.com%2Fpc%2Fpassport%2FsnsLogin%3Fcsrf_state%3D417bda0b5c471bf7a910ef4ea1375ee6%26sns_platform%3Dwechat%26source%3Dmain-fe-header%26go_url%3Dhttps%253A%252F%252Fwww.bilibili.com%252F&response_type=code&scope=snsapi_login&state=authorize#wechat_redirect">
          <div class="xiaotubiao"><div style="width: 30px;height: 30px;background-color: green;border-radius: 50%;line-height: 30px;"><span class="iconfont icon-weixin"></span></div><div><span style="color: #666;margin-left: 10px;">微信登陆</span></div></div></a>
      <a href="https://api.weibo.com/oauth2/authorize?client_id=2841902482&redirect_uri=https%3A%2F%2Fpassport.bilibili.com%2Fpc%2Fpassport%2FsnsLogin%3Fcsrf_state%3Da3ac1f37b25d7448a607592b17e6eb78%26sns_platform%3Dweibo%26source%3Dmain-fe-header%26go_url%3Dhttps%253A%252F%252Fwww.bilibili.com%252F&scope=email###">
          <div class="xiaotubiao"><div style="width: 30px;height: 30px;background-color: orangered;border-radius: 50%;line-height: 30px;"><span class="iconfont icon-xinlangweibo"></span></div><div><span style="color: #666;margin-left: 10px;">微博登录</span></div></div></a>
      <a href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&state=authorize&client_id=101135748&redirect_uri=https%3A%2F%2Fpassport.bilibili.com%2Fpc%2Fpassport%2FsnsLogin%3Fcsrf_state%3De85803a7aab5ccfc3b6dd4caa34dc92a%26sns_platform%3Dqq%26source%3Dmain-fe-header%26go_url%3Dhttps%253A%252F%252Fwww.bilibili.com%252F&scope=do_like,get_user_info,get_simple_userinfo,get_vip_info,get_vip_rich_info,add_one_blog,list_album,upload_pic,add_album,list_photo,get_info,add_t,del_t,add_pic_t,get_repost_list,get_other_info,get_fanslist,get_idollist,add_idol,del_idol,get_tenpay_addr">
          <div class="xiaotubiao"><div style="width: 30px;height: 30px;background-color: #285fde;border-radius: 50%;line-height: 30px;"><span class="iconfont icon-QQ"></span></div><div><span style="color: #666;margin-left: 10px;">QQ登录</span></div></div></a>
  </div>
</div>